<template>
	<el-card>
		<el-form :inline="true" :model="state.queryForm">
			<el-form-item label="数据集名称">
				<el-input placeholder="输入数据集名称" v-model="state.queryForm.datasetName"> </el-input>
			</el-form-item>
			<el-form-item label="核验状态">
				<el-select v-model="state.queryForm.invalidFlag" placeholder="请选择">
					<el-option v-for="item in validListData" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="版本时间">
				<el-select v-model="state.queryForm.versionId" placeholder="请选择">
					<el-option v-for="item in vTimeListData" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getDataList()" :icon="Search">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button @click="resets" :icon="Refresh">重置</el-button>
			</el-form-item>
			<el-form-item>
				<el-button v-auth="'data-governance:verification-dataset:add'" :icon="Plus" type="primary" @click="handleEdit('')">新增</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%">
			<el-table-column label="序号" type="index" width="60" align="center"> </el-table-column>
			<el-table-column label="数据集名称" prop="datasetName">
				<!-- <template #default="scope">
					<span style="color: rgba(15, 64, 245, 1); cursor: pointer">{{ scope.row.datasetName }}</span>
				</template> -->
			</el-table-column>
			<el-table-column label="数据集名" prop="datasetCode"> </el-table-column>
			<el-table-column label="表数量" prop="tableCnt" width="100"> </el-table-column>
			<el-table-column label="备注" prop="datasetDescription"> </el-table-column>
			<el-table-column label="版本时间" prop="versionId"> </el-table-column>
			<el-table-column label="核验状态" prop="invalidFlag" width="160">
				<template #default="scope">
					<el-switch
						:disabled="isDisabled('data-governance:verification-dataset:switch')"
						v-model="scope.row.invalidFlag"
						:active-value="'0'"
						:inactive-value="'1'"
						@change="statusChange($event, scope.row)"
					></el-switch>
					<!-- <el-switch :value="scope.row.invalidFlag === '0' ? true : false"  @change="statusChange($event, scope.row)"></el-switch> -->
					<span style="margin-left: 10px">
						{{ scope.row.invalidFlag === '0' ? '开启' : '关闭' }}
					</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="160">
				<template #default="scope">
					<el-button v-auth="'data-governance:verification-dataset:edit'" type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
					<el-button v-auth="'data-governance:verification-dataset:delete'" type="primary" link @click="handleDelete(scope.$index, scope.row)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
		<Form ref="FormRef" @close="getDataList" />
	</el-card>
</template>

<script setup lang="ts" >
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'
import { IHooksOptions } from '@/hooks/interface'
import { Delete, Edit, Search, Plus, CircleClose, Refresh } from '@element-plus/icons-vue'
import { useCrud } from '@/hooks/index'

import { getVTime, deleteRuleDataset, saveRuleDataset } from '@/api/verification-dataset/index'

import { h } from 'vue'

import Form from './form.vue'
import store from '@/store'

const validListData = [
	{
		label: '全部',
		value: ''
	},
	{
		label: '开启',
		value: '0'
	},
	{
		label: '关闭',
		value: '1'
	}
]

let vTimeListData = ref([])
let loading = ref(true)
const currentPage = ref(1)

let total = ref(0)

const FormRef = ref()

let isformvisible = ref(false)

const state: IHooksOptions = reactive({
	dataListLoading: true,
	dataListUrl: '/data-governance/quality/qaRuleDataset/getList',
	queryForm: {
		datasetName: '',
		invalidFlag: '',
		versionId: ''
	}
})

const isDisabled = (name: string) => {
	return !store.userStore.authorityList.some((v: string) => v === name)
}

onMounted(() => {
	getVTimeData()
})

// 版本时间
const getVTimeData = () => {
	vTimeListData.value.push({
		label: '全部',
		value: ''
	})
	getVTime().then((res: any) => {
		vTimeListData.value = vTimeListData.value.concat(res.data)
	})
}

const statusChange = (value, data) => {
	if (parseFloat(value)) {
		// const messageHtml = `<div>
		// 	<div style="display: flex">
		// 		<div style="padding-left: 12px;">
		// 			<span style="line-height:20px;vertical-align:super;font-size: 16px;font-weight: 600;">确认关闭【</span>
		// 			<span style="line-height:20px;vertical-align:super;font-size: 16px;color:#0F40F5;font-weight: 600;">${data.DATASET_NAME}</span>
		// 			<span style="line-height:20px;vertical-align:super;font-size: 16px;font-weight: 600;">】数据集核验吗？</span>
		// 		</div>
		// 	</div>
		// 	<p style="padding-left:35px;">关闭核验，则该数据集停止核验。此会影响所有与本数据集有关的字段核验，单表核验及跨表核验</p>
		// </div>`
		// ElMessageBox({
		// 	title: '',
		// 	type: 'warning',
		// 	message: h({
		// 		template: messageHtml
		// 	}),
		// 	// message: h('div', null, [
		// 	// 	h('div', { style: 'display: flex;' }, [
		// 	// 		h({
		// 	// 			template: `<el-icon :size='24' color="#F38300"><WarningFilled / ></el-icon>`
		// 	// 		}),
		// 	// 		h(
		// 	// 			'div',
		// 	// 			{
		// 	// 				style: 'padding-left: 12px;'
		// 	// 			},
		// 	// 			[
		// 	// 				h(
		// 	// 					'span',
		// 	// 					{
		// 	// 						style: 'line-height:20px;vertical-align:super;font-size: 16px;font-weight: 600;'
		// 	// 					},
		// 	// 					`确认关闭【`
		// 	// 				),
		// 	// 				h(
		// 	// 					'span',
		// 	// 					{
		// 	// 						style: 'line-height:20px;vertical-align:super;font-size: 16px;color:#0F40F5;font-weight: 600;'
		// 	// 					},
		// 	// 					`${data.DATASET_NAME}`
		// 	// 				),
		// 	// 				h(
		// 	// 					'span',
		// 	// 					{
		// 	// 						style: 'line-height:20px;vertical-align:super;font-size: 16px;font-weight: 600;'
		// 	// 					},
		// 	// 					`】数据集核验吗？`
		// 	// 				)
		// 	// 			]
		// 	// 		)
		// 	// 	]),
		// 	// 	h('p', { style: 'padding-left:35px;' }, `关闭核验，则该数据集停止核验。此会影响所有与本数据集有关的字段核验，单表核验及跨表核验`)
		// 	// ]),
		// 	showCancelButton: true,
		// 	confirmButtonText: '关闭',
		// 	cancelButtonText: '取消',
		// 	customClass: 'datasetConfirm',
		// 	confirmButtonClass: 'confirmBtn'
		// })
		ElMessageBox.confirm(
			'关闭核验，则该数据集停止核验。此会影响所有与本数据集有关的字段核验，单表核验及跨表核验',
			`确认关闭【${data.datasetName}】数据集核验吗？`,
			{
				confirmButtonText: '关闭',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'datasetConfirm',
				confirmButtonClass: 'confirmBtn'
			}
		)
			.then(async () => {
				data.invalidFlag = '1'
				saveRuleDataset(data).then(
					res => {
						ElMessage({
							type: 'success',
							duration: 1000,
							message: res.msg,
							onClose: () => {
								getDataList()
							}
						})
					},
					error => {
						data.invalidFlag = '0'
						// ElMessage({
						// 	type: 'error',
						// 	duration: 1000,
						// 	message: error.msg,
						// 	onClose: () => {
						// 		data.invalidFlag = '0'
						// 	}
						// })
					}
				)
			})
			.catch(async () => {
				data.invalidFlag = '0'
			})
	} else {
		data.INVALID_FLAG = '0'
		saveRuleDataset(data).then(
			res => {
				ElMessage({
					type: 'success',
					duration: 1000,
					message: res.data.msg,
					onClose: () => {
						getDataList()
					}
				})
			},
			error => {
				ElMessage({
					type: 'error',
					duration: 1000,
					message: error.message,
					onClose: () => {
						data.invalidFlag = '0'
					}
				})
			}
		)
	}
}

const handleEdit = data => {
	FormRef.value.init(data)
}

const handleDelete = (index, data) => {
	// const messageHtml = `<div>
	// 	<div style="display: flex">
	// 		<div style="padding-left: 12px;">
	// 			<span style="line-height:20px;vertical-align:super;font-size: 16px;font-weight: 600;">确认删除【</span>
	// 			<span style="line-height:20px;vertical-align:super;font-size: 16px;color:#0F40F5;font-weight: 600;">${data.DATASET_NAME}</span>
	// 			<span style="line-height:20px;vertical-align:super;font-size: 16px;font-weight: 600;">】数据集核验吗？</span>
	// 		</div>
	// 	</div>
	// 	<p style="padding-left:35px;">删除核验，则该数据集停止核验。此会影响所有与本数据集有关的字段核验，单表核验及跨表核验</p>
	// </div>`
	ElMessageBox.confirm(
		'删除核验，则该数据集停止核验。此会影响所有与本数据集有关的字段核验，单表核验及跨表核验',
		`确认删除【${data.datasetName}】数据集核验吗？`,
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}
	)
		// ElMessageBox({
		// 	title: '',
		// 	type: 'warning',
		// 	message: h({
		// 		template: messageHtml
		// 	}),
		// 	// message: h('div', null, [
		// 	// 	h('div', { style: 'display: flex;' }, [
		// 	// 		h({
		// 	// 			template: `<el-icon :size='24' color="#F38300"><WarningFilled / ></el-icon>`
		// 	// 		}),
		// 	// 		h(
		// 	// 			'div',
		// 	// 			{
		// 	// 				style: 'padding-left: 12px;'
		// 	// 			},
		// 	// 			[
		// 	// 				h(
		// 	// 					'span',
		// 	// 					{
		// 	// 						style: 'line-height:20px;vertical-align:super;font-size: 16px;font-weight: 600;'
		// 	// 					},
		// 	// 					`确认删除【`
		// 	// 				),
		// 	// 				h(
		// 	// 					'span',
		// 	// 					{
		// 	// 						style: 'line-height:20px;vertical-align:super;font-size: 16px;color:#0F40F5;font-weight: 600;'
		// 	// 					},
		// 	// 					`${data.DATASET_NAME}`
		// 	// 				),
		// 	// 				h(
		// 	// 					'span',
		// 	// 					{
		// 	// 						style: 'line-height:20px;vertical-align:super;font-size: 16px;font-weight: 600;'
		// 	// 					},
		// 	// 					`】数据集核验吗？`
		// 	// 				)
		// 	// 			]
		// 	// 		)
		// 	// 	]),
		// 	// 	h('p', { style: 'padding-left:35px;' }, `删除核验，则该数据集停止核验。此会影响所有与本数据集有关的字段核验，单表核验及跨表核验`)
		// 	// ]),
		// 	showCancelButton: true
		// })
		.then(() => {
			deleteRuleDataset({ id: data.id })
				.then(res => {
					ElMessage({
						type: 'success',
						message: res.msg,
						duration: 500,
						onClose: () => {
							getDataList()
						}
					})
				})
				.catch(() => {})
		})
		.catch(() => {})
}

const resets = () => {
	state.queryForm = {
		datasetName: '',
		invalidFlag: '',
		versionId: ''
	}

	state.page = 1
	state.limit = 10

	getDataList()
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle } = useCrud(state)
</script>
<style  >
/* .el-message-box__status {
	top: 12%;
} */
</style>
